<template>
  <HotSkeleton v-if="loading"></HotSkeleton>
  <view v-else class="hot-details">
    <view class="banner">
      <image :src="details?.bannerPicture" mode="aspectFill"></image>
    </view>
    <view class="tabs-box">
      <view
        class="tab-item"
        v-for="(tab, index) in details?.subTypes"
        :key="tab.id"
        @tap="activeIndex = index"
      >
        <view class="title" :class="{ active: activeIndex === index }">{{ tab.title }}</view>
      </view>
    </view>

    <scroll-view
      v-for="(sub, index) in subTypes"
      :key="sub.id"
      scroll-y
      enable-flex
      v-show="activeIndex === index"
      @scrolltolower="onScrollToLower"
      class="scroll-box"
    >
      <view class="goods">
        <navigator
          :url="`/pages/goods/goods?id=${item.id}`"
          v-for="item in sub?.goodsItems.items"
          :key="item.id"
          class="item"
        >
          <image class="image" :src="item.picture" mode="aspectFill"></image>
          <view class="item-title">
            <text class="text">{{ item.name }}</text>
          </view>
          <view class="price">
            <text class="symbol">￥</text>
            <text class="number">{{ item.price }}</text>
          </view>
        </navigator>
      </view>
      <view class="info">
        <view class="loading" v-if="!sub.ifFinish">
          <uni-icons type="spinner-cycle" size="14"></uni-icons>
          <text class="icon-loading">正在加载中...</text>
        </view>
        <view class="no-loading" v-else>暂无数据</view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Api from '@/services/index'
import type { THotDetail, THotSubType } from '@/types/hot'
import type { TPageParams } from '@/types/global'
import HotSkeleton from './components/HotSkeleton.vue'
const hotMap = [
  { type: '1', title: '特惠推荐', url: '/hot/preference' },
  { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
  { type: '3', title: '一站买全', url: '/hot/oneStop' },
  { type: '4', title: '新鲜好物', url: '/hot/new' },
]

type TItem = {
  type: string
  title: string
  url: string
}

const details = ref<THotDetail>()
const activeIndex = ref(0)
const subTypes = ref<(THotSubType & { ifFinish?: boolean })[]>()
const loading = ref(true)
let item: TItem

const ifFinish = computed(() => {
  if (subTypes.value?.length) {
    return subTypes.value[activeIndex.value].ifFinish
  } else {
    return false
  }
})
// const chooseSub = computed(() => {
//   if (subTypes.value?.length) {
//     return subTypes.value[activeIndex.value]
//   } else {
//     return {}
//   }
// })
async function getData(data?: TPageParams & { subType: string }) {
  const res = await Api.HotAPI.getHotListById(item!.url, data)
  details.value = res.result
  const oldArr = subTypes.value || []
  if (subTypes.value?.length) {
    const chooseSub = subTypes.value[activeIndex.value]
    const newArr = res.result.subTypes[activeIndex.value]
    chooseSub.goodsItems.items.push(...newArr.goodsItems.items)
  } else {
    subTypes.value = res.result.subTypes
  }
}

onLoad(async (options) => {
  loading.value = true
  item = hotMap.find((i) => i.type === options?.type)!
  uni.setNavigationBarTitle({ title: item!.title })
  await getData()
  loading.value = false
})

const onScrollToLower: UniHelper.ScrollViewOnScrolltolower = (event) => {
  const chooseSub = subTypes.value![activeIndex.value]
  console.log(chooseSub.id)
  console.log(chooseSub.goodsItems.page)
  console.log(chooseSub.goodsItems.pageSize)
  if (chooseSub.ifFinish) {
    return uni.showToast({
      icon: 'none',
      title: '没有更多数据了',
    })
  } else {
    // getSsrGlobalData()
    getData({
      subType: chooseSub.id,
      page: chooseSub.goodsItems.page,
      pageSize: chooseSub.goodsItems.pageSize,
    })
  }
}
</script>

<style lang="scss" scoped>
@import './styles/hot.scss';
</style>
